<template>
  <div v-if="cloneConfig" name="page" class="page-wrapper">
    <Affix v-if="cloneConfig.title" :offset-top="108" class="star-affix">
        <div name="header" class="page-header-wrapper">
            <Icon :type="config.icon" size="24" class="page-header-icon" @click="drawerShow=!drawerShow"/>
            <span :style="cloneConfig.titleStyle">{{cloneConfig.title}}</span>
            <span class="page-header-menu">
                <slot name="menu"></slot>
            </span>
        </div>
    </Affix>
    <div class="page-content-wrapper" :style="{...config.contentStyle,height:height}">
            <Drawer v-if="config.drawer" v-model="drawerShow" :transfer="false" :inner="true" placement="top">
                <slot name="drawer"></slot>
            </Drawer>
        <template v-if="Array.isArray(cloneConfig.cols)">
            <template v-if="cloneConfig.cols.length==1">
                <Row class="row-wrapper">
                    <Col class="single-col-wrapper" :span="cloneConfig.cols[0]">
                        <slot name="left">
                            <Card :class="{'card-wrapper':true,'card-wrapper-hidden':!cloneConfig.left.title}" :style="{height:cloneConfig.left.height}" :dis-hover="!cloneConfig.left.hover" :shadow="cloneConfig.left.shadow">
                                <slot name="leftCard"></slot>
                                <template #extra v-if="cloneConfig.left.extra">
                                    <slot name="leftExtra">
                                        <template v-for="(ex,i) in cloneConfig.left.extra">
                                            <a :style="ex.style" type="text" @click="$emit('leftExtra', ex)">{{ ex.title }}</a>
                                            <Divider v-if="i < cloneConfig.left.extra.length - 1" type="vertical"/>
                                        </template>
                                    </slot>
                                </template>
                                <div slot="title" class="card-header">
                                    <Icon :type="cloneConfig.left.icon" class="card-header-icon" @click.native="menu=cloneConfig.left.menu"></Icon>
                                    <span>{{cloneConfig.left.title}}</span>
                                    <ul v-if="cloneConfig.left.menu&&cloneConfig.left.menu.length>0" class="card-menu" :style="{display:menu==cloneConfig.left.menu?'block':'none'}" @mouseleave="menu=null">
                                        <template v-for="l in cloneConfig.left.menu">
                                            <li class="card-menu-item" :style="l.style" @click="menu=null;$emit('leftMenu',l)">{{l.title}}</li>
                                        </template>
                                    </ul>
                                </div>
                            </Card>
                        </slot>
                    </Col>
                </Row>
            </template>
            <template v-else-if="cloneConfig.cols.length==2">
                <template v-if="cloneConfig.split">
                    <Split class="split-wrapper" v-model="split">
                        <slot slot="left" name="left">
                            <Card :class="{'card-wrapper':true,'card-wrapper-hidden':!cloneConfig.left.title}" :style="{height:cloneConfig.left.height}" :dis-hover="!cloneConfig.left.hover" :shadow="cloneConfig.left.shadow">
                                <slot name="leftCard"></slot>
                                <template #extra v-if="cloneConfig.left.extra">
                                    <slot name="leftExtra">
                                        <template v-for="(ex,i) in cloneConfig.left.extra">
                                            <a :style="ex.style" type="text" @click="$emit('leftExtra', ex)">{{ ex.title }}</a>
                                            <Divider v-if="i < cloneConfig.left.extra.length - 1" type="vertical"/>
                                        </template>
                                    </slot>
                                </template>
                                <div slot="title" class="card-header">
                                    <Icon :type="cloneConfig.left.icon" class="card-header-icon" @click.native="menu=cloneConfig.left.menu"></Icon>
                                    <span>{{cloneConfig.left.title}}</span>
                                    <ul v-if="cloneConfig.left.menu&&cloneConfig.left.menu.length>0" class="card-menu" :style="{display:menu==cloneConfig.left.menu?'block':'none'}" @mouseleave="menu=null">
                                        <template v-for="l in cloneConfig.left.menu">
                                            <li class="card-menu-item" :style="l.style" @click="menu=null;$emit('leftMenu',l)">{{l.title}}</li>
                                        </template>
                                    </ul>
                                </div>
                            </Card>
                        </slot>
                        <slot slot="right" name="right">
                            <Card :class="{'card-wrapper':true,'card-wrapper-hidden':!cloneConfig.right.title}" :style="{height:cloneConfig.right.height}" :dis-hover="!cloneConfig.right.hover" :shadow="cloneConfig.right.shadow">
                                <slot name="rightCard"></slot>
                                <template #extra v-if="cloneConfig.right.extra">
                                    <slot name="rightExtra">
                                        <template v-for="(ex,i) in cloneConfig.right.extra">
                                            <a :style="ex.style" type="text" @click="$emit('rightExtra', ex)">{{ ex.title }}</a>
                                            <Divider v-if="i < cloneConfig.right.extra.length - 1" type="vertical"/>
                                        </template>
                                    </slot>
                                </template>
                                <div slot="title" class="card-header">
                                    <Icon :type="cloneConfig.right.icon" class="card-header-icon" @click.native="menu=cloneConfig.right.menu"></Icon>
                                    <span>{{cloneConfig.right.title}}</span>
                                    <ul v-if="cloneConfig.right.menu&&cloneConfig.right.menu.length>0" class="card-menu" :style="{display:menu==cloneConfig.right.menu?'block':'none'}" @mouseleave="menu=null">
                                        <template v-for="l in cloneConfig.right.menu">
                                            <li class="card-menu-item" :style="l.style" @click="menu=null;$emit('rightMenu',l)">{{l.title}}</li>
                                        </template>
                                    </ul>
                                </div>
                            </Card>
                        </slot>
                    </Split>
                </template>
                <template v-else>
                <Row class="row-wrapper">
                    <Col class="left-col-wrapper" :span="cloneConfig.cols[0]">
                        <slot name="left">
                            <Card :class="{'card-wrapper':true,'card-wrapper-hidden':!cloneConfig.left.title}" :style="{height:cloneConfig.left.height}" :dis-hover="!cloneConfig.left.hover" :shadow="cloneConfig.left.shadow">
                                <slot name="leftCard"></slot>
                                <template #extra v-if="cloneConfig.left.extra">
                                    <slot name="leftExtra">
                                        <template v-for="(ex,i) in cloneConfig.left.extra">
                                            <a :style="ex.style" type="text" @click="$emit('leftExtra', ex)">{{ ex.title }}</a>
                                            <Divider v-if="i < cloneConfig.left.extra.length - 1" type="vertical"/>
                                        </template>
                                    </slot>
                                </template>
                                <div slot="title" class="card-header">
                                    <Icon :type="cloneConfig.left.icon" class="card-header-icon" @click.native="menu=cloneConfig.left.menu"></Icon>
                                    <span>{{cloneConfig.left.title}}</span>
                                    <ul v-if="cloneConfig.left.menu&&cloneConfig.left.menu.length>0" class="card-menu" :style="{display:menu==cloneConfig.left.menu?'block':'none'}" @mouseleave="menu=null">
                                        <template v-for="l in cloneConfig.left.menu">
                                            <li class="card-menu-item" :style="l.style" @click="menu=null;$emit('leftMenu',l)">{{l.title}}</li>
                                        </template>
                                    </ul>
                                </div>
                            </Card>
                        </slot>
                    </Col>
                    <Col class="right-col-wrapper" :span="cloneConfig.cols[1]">
                        <slot name="right">
                            <Card :class="{'card-wrapper':true,'card-wrapper-hidden':!cloneConfig.right.title}" :style="{height:cloneConfig.right.height}" :dis-hover="!cloneConfig.right.hover" :shadow="cloneConfig.right.shadow">
                                <slot name="rightCard"></slot>
                                <template #extra v-if="cloneConfig.right.extra">
                                    <slot name="rightExtra">
                                        <template v-for="(ex,i) in cloneConfig.right.extra">
                                            <a :style="ex.style" type="text" @click="$emit('rightExtra', ex)">{{ ex.title }}</a>
                                            <Divider v-if="i < cloneConfig.right.extra.length - 1" type="vertical"/>
                                        </template>
                                    </slot>
                                </template>
                                <div slot="title" class="card-header">
                                    <Icon :type="cloneConfig.right.icon" class="card-header-icon" @click.native="menu=cloneConfig.right.menu"></Icon>
                                    <span>{{cloneConfig.right.title}}</span>
                                    <ul v-if="cloneConfig.right.menu&&cloneConfig.right.menu.length>0" class="card-menu" :style="{display:menu==cloneConfig.right.menu?'block':'none'}" @mouseleave="menu=null">
                                        <template v-for="l in cloneConfig.right.menu">
                                            <li class="card-menu-item" :style="l.style" @click="menu=null;$emit('rightMenu',l)">{{l.title}}</li>
                                        </template>
                                    </ul>
                                </div>
                            </Card>
                        </slot>
                    </Col>
                </Row>
                </template>
            </template>
            <template v-else-if="cloneConfig.cols.length==3">
                <Row class="row-wrapper">
                    <Col class="left-col-wrapper" :span="cloneConfig.cols[0]">
                        <slot name="left">
                            <Card :class="{'card-wrapper':true,'card-wrapper-hidden':!cloneConfig.left.title}" :style="{height:cloneConfig.left.height}" :dis-hover="!cloneConfig.left.hover" :shadow="cloneConfig.left.shadow">
                                <slot name="leftCard"></slot>
                                <template #extra v-if="cloneConfig.left.extra">
                                    <slot name="leftExtra">
                                        <template v-for="(ex,i) in cloneConfig.left.extra">
                                            <a :style="ex.style" type="text" @click="$emit('leftExtra', ex)">{{ ex.title }}</a>
                                            <Divider v-if="i < cloneConfig.left.extra.length - 1" type="vertical"/>
                                        </template>
                                    </slot>
                                </template>
                                <div slot="title" class="card-header">
                                    <Icon :type="cloneConfig.left.icon" class="card-header-icon" @click.native="menu=cloneConfig.left.menu"></Icon>
                                    <span>{{cloneConfig.left.title}}</span>
                                    <ul v-if="cloneConfig.left.menu&&cloneConfig.left.menu.length>0" class="card-menu" :style="{display:menu==cloneConfig.left.menu?'block':'none'}" @mouseleave="menu=null">
                                        <template v-for="l in cloneConfig.left.menu">
                                            <li class="card-menu-item" :style="l.style" @click="menu=null;$emit('leftMenu',l)">{{l.title}}</li>
                                        </template>
                                    </ul>
                                </div>
                            </Card>
                        </slot>
                    </Col>
                    <Col class="left-col-wrapper right-col-wrapper" :span="cloneConfig.cols[1]">
                        <slot name="middle">
                            <Card :class="{'card-wrapper':true,'card-wrapper-hidden':!cloneConfig.middle.title}" :style="{height:cloneConfig.middle.height}" :dis-hover="!cloneConfig.middle.hover" :shadow="cloneConfig.middle.shadow">
                                <slot name="middleCard"></slot>
                                <template #extra v-if="cloneConfig.middle.extra">
                                    <slot name="middleExtra">
                                        <template v-for="(ex,i) in cloneConfig.middle.extra">
                                            <a :style="ex.style" type="text" @click="$emit('middleExtra', ex)">{{ ex.title }}</a>
                                            <Divider v-if="i < cloneConfig.middle.extra.length - 1" type="vertical"/>
                                        </template>
                                    </slot>
                                </template>
                                <div slot="title" class="card-header">
                                    <Icon :type="cloneConfig.middle.icon" class="card-header-icon" @click.native="menu=cloneConfig.middle.menu"></Icon>
                                    <span>{{cloneConfig.middle.title}}</span>
                                    <ul v-if="cloneConfig.middle.menu&&cloneConfig.middle.menu.length>0" class="card-menu" :style="{display:menu==cloneConfig.middle.menu?'block':'none'}" @mouseleave="menu=null">
                                        <template v-for="l in cloneConfig.middle.menu">
                                            <li class="card-menu-item" :style="l.style" @click="menu=null;$emit('middleMenu',l)">{{l.title}}</li>
                                        </template>
                                    </ul>
                                </div>
                            </Card>
                        </slot>
                    </Col>
                    <Col class="right-col-wrapper" :span="cloneConfig.cols[2]">
                        <slot name="right">
                            <Card :class="{'card-wrapper':true,'card-wrapper-hidden':!cloneConfig.right.title}" :style="{height:cloneConfig.right.height}" :dis-hover="!cloneConfig.right.hover" :shadow="cloneConfig.right.shadow">
                                <slot name="rightCard"></slot>
                                <template #extra v-if="cloneConfig.right.extra">
                                    <slot name="rightExtra">
                                        <template v-for="(ex,i) in cloneConfig.right.extra">
                                            <a :style="ex.style" type="text" @click="$emit('rightExtra', ex)">{{ ex.title }}</a>
                                            <Divider v-if="i < cloneConfig.right.extra.length - 1" type="vertical"/>
                                        </template>
                                    </slot>
                                </template>
                                <div slot="title" class="card-header">
                                    <Icon :type="cloneConfig.right.icon" class="card-header-icon" @click.native="menu=cloneConfig.right.menu"></Icon>
                                    <span>{{cloneConfig.right.title}}</span>
                                    <ul v-if="cloneConfig.right.menu&&cloneConfig.right.menu.length>0" class="card-menu" :style="{display:menu==cloneConfig.right.menu?'block':'none'}" @mouseleave="menu=null">
                                        <template v-for="l in cloneConfig.right.menu">
                                            <li class="card-menu-item" :style="l.style" @click="menu=null;$emit('rightMenu',l)">{{l.title}}</li>
                                        </template>
                                    </ul>
                                </div>
                            </Card>
                        </slot>
                    </Col>
                </Row>
            </template>
            <template v-else>
                <Row class="row-wrapper">
                    <Col class="single-col-wrapper" :span="24">
                <slot></slot>
                </Col>
            </Row>
            </template>
        </template>
        <template v-else>
            <Row class="row-wrapper">
                    <Col class="single-col-wrapper" :span="24">
                <slot></slot>
                </Col>
            </Row>
        </template>
        <slot name="others"></slot>
    </div>
  </div>
</template>

<script>
import { merge } from "lodash";
export default {
  name:'starPage',
  components: {},
  data() {
    return {
        height:'100%',
        cloneConfig:null,
        menu:null,
        drawerShow:false,
        split:0.5
    };
  },
  props: {
    config: {
      default: () => {
        return {};
      },
    },
  },
  watch: {
    config: {
      handler(val) {
        this.cloneConfig = merge(this.cloneConfig, this.config);
        this.cloneConfig.cols = this.config.cols;
        this.setSplit();
      },
      deep: true,
    },
  },
  computed: {
    defaultConfig(){
        return {
            title:'abc',
            icon:'ios-paper-outline',
            split:false,
            drawer:false,
            titleStyle:{},
            contentStyle:{},
            cols:null,
            left:{
                icon:'md-apps',
                title:'',
                height:'100%',
                shadow:false,
                hover:true,
                extra:[],
                menu:[]
            },
            middle:{
                icon:'md-apps',
                title:'',
                height:'100%',
                shadow:false,
                hover:true,
                extra:[],
                menu:[]
            },
            right:{
                icon:'md-apps',
                title:'',
                height:'100%',
                shadow:false,
                hover:true,
                extra:[],
                menu:[]
            }

        }
    }
  },
  created() {},
  mounted() {
    this.setConfig();
    this.$nextTick(() => {
      const obs = new ResizeObserver((entries) => {
        this.height = this.cloneConfig.title?(entries[0].contentRect.height - 63)+'px':entries[0].contentRect.height+'px';
      });
      obs.observe(this.$el);
      this.$emit('onload',this)
    });
  },
  methods: {
    setConfig() {
      this.cloneConfig = merge(this.defaultConfig, this.config);
      this.cloneConfig.cols = this.config.cols;
      Object.keys(this.cloneConfig).map((key) => {
        this.$set(this.config, key, this.cloneConfig[key]);
      });
      this.setSplit();
    },
    setSplit(){
        if(Array.isArray(this.cloneConfig.cols)&&this.cloneConfig.cols.length==2){
            this.split = this.cloneConfig.cols[0]/(this.cloneConfig.cols[0]+this.cloneConfig.cols[1]);
        }
    }
  }
};
</script>
<style scoped lang="scss">
.page-wrapper {
    position: relative;
    width:100%;
    height:100%;
}
.page-content-wrapper {
    position: relative;
    width:100%;
    padding:10px 10px 5px 10px;
    overflow: auto;
}
.page-header-wrapper {
  display:flex;
  justify-content: flex-start;
  align-items: center;
  height:63px;
  padding: 5px 32px;
  background: #fff;
  border-bottom: 1px solid #e8eaec;
  font-size:20px;
  font-weight: 500;
  margin:0 -24px;
}
.page-header-icon {
    margin: 0px 10px;
}
.page-header-menu {
    margin-right: 10px;
    margin-left:auto;
}
.split-wrapper {
    position: relative;
    height:100%;
}
.split-wrapper div {
    width:100%;
    & .left-pane {
        height:100%;
    }
    & .right-pane {
        height:100%;
    }
}
.row-wrapper {
    position: relative;
    height:100%;
    overflow: auto;
}
.left-col-wrapper {
    position: relative;
    height:100%;
    overflow: auto;
    padding:1px;
    padding-right: 5px;
}
.single-col-wrapper {
    position: relative;
    height:100%;
    overflow: auto;
    padding:2px;
}
.right-col-wrapper {
    position: relative;
    height:100%;
    overflow: auto;
    padding:1px;
    padding-left: 5px;
}
.card-wrapper {
    height:100%;
    ::v-deep .ivu-card-body {
        height:calc(100% - 51px);
        overflow: auto;
    }
}
.card-wrapper-hidden {
    height:100%;
    ::v-deep .ivu-card-head {
        display:none;
    }
    ::v-deep .ivu-card-body {
        height:100%;
        overflow: auto;
    }
}
.card-header {
    display: flex;
    position: relative;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
}
.card-header-icon {
    font-size: 24px;
    margin-right:10px;
}
.card-menu {
    display:none;
    position: absolute;
    list-style-type:none;
    min-width: 100px;
    max-height:300px;
    left:5px;
    top:24px;
    z-index: 99;
    padding:5px 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
    background: #fff;
    border-color: #eee;
    border-radius: 4px;
    cursor: default;
    overflow-x: auto;
}
.card-menu-item {
    padding:5px 10px;
}

</style>